import React, { useEffect, useState ,Key} from 'react'
import { Button, Card, Form, Input, Table, message,Tooltip } from 'antd';
// 引入查询图标小组件
import { SearchOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons"
// 引入自己写的css样式
import style from "./index.module.css"
// 引入axios请求,发送请求,获取数据
import { deleteHosSetIdRequest, getHospitalSetlistRequest,deleteDataBatchesRequest} from '@/api/hospital/hospitalSet';
// 引入类型
import type { getHosSetListRecordsType,getHosSetListItemsType } from '@/api/hospital/model/hospitalSetType'
import { useNavigate } from 'react-router-dom';
// 6.1设置表单搜索框的数据类型
interface searchHosFinishPraType {
    hosname?: string,
    hoscode?: string
}

export default function HospitalSet() {
    // 3.2.3新增/更新医院数据的回调函数中使用的hooks编程式路由导航
    const navigate = useNavigate()

    //1.data是表格的数据 每一个对象的中的key和columns中的dataIndex一一对象展示数据
    const [tableData, setTableData] = useState<getHosSetListRecordsType>([])
    //2.定义current(当前页码)的state[useState的泛型根据我们传入的参数推论出来了]
    const [current, setCurrent] = useState(1)
    //3.定义total(总个数)的state
    const [total, setTotal] = useState(0)
    //4.定义pageSize(每页的数量)的state
    const [pageSize, setPageSize] = useState(3)
    //5.定义isLoading(table是否加载中)
    const [isLoading, setIsLoading] = useState(false);
    // 6.获取表单搜索框的数据
    const [iptvalues, setIptvalues] = useState<searchHosFinishPraType>({})
    // 7.定义一个删除事件的状态的state
    const [rendState,setRendState]=useState(false)
    // 8.定义一个多选框的状态state,用来jianting多选框的状态来影响批量删除的状态
    const [isSelect,setIsSelect]=useState(true)
    // 9.定义一个保存批量删除的ids的State状态,初始值设置Wie空数组,当我们下面选中复选框的时候
    // setBatchSelectIds(ids)将其保存到bacthSelectIds中
    const [bacthSelectIds, setBatchSelectIds]=useState<Key[]>([])



    // 当我们组件加载的时候,需要请求分页的列表的数据并渲染,这里使用useEffect
    // 这里注意一点,异步函数不能做为useEffect的参数
    // 因为useEffect可能会书写return一个函数起到清理作用,如果是异步函数,则return就是异步的了
    useEffect(() => {
        //5.1在请求开始之前,设置isLoading为true
        setIsLoading(true)
        // 所以这里我们用一个函数进行包裹,这个函数不是异步的,内部函数才是异步的,后面记得调用
        const getHospitalList = async () => {
            const result = await getHospitalSetlistRequest({
                page: current,  //***2.1请求的数据设置当前页开始
                limit: pageSize,  // ***4.1设置每页请求的数量
                ...iptvalues,    // ***6.1请求输入框输入的数据,
            })
            // 这里就是我们请求的数据,此时就可以将数据填入下方的data中,将数据写活
            console.log(result);
            console.log(result.records);
            //***1.1把得到的结果中records数据(医院列表的数组)设置给state
            setTableData(result.records)
            //***3.1把得到的结果中 数据的总长度设置给state
            setTotal(result.total)

            //***5.1请求完成后要把isLoading修改为false 
            setIsLoading(false)

        }
        getHospitalList()
        // useEffect第二个参数,数组中填入current以及pageSize,当这两个数据发生变化时,
        // useEffect从新渲染,具体的数据变化在下面我们的点击事件函数发生的时候
        // 新增搜索框数据iptvalues,发生改变时渲染
    }, [current, pageSize, iptvalues,rendState,isSelect,bacthSelectIds])

    // columns是控制表格的字段有哪些(就是渲染那几列数据)
    // title属性就是当前字段的名称(渲染的每一行数据)
    // dataIndex就是为了和之后的数据对应的
    // (dataIndex类似于key,正常来说columns必须有key,但是如果书写了dataIndex,可以不用写key)
    const columns = [
        {
            title: '序号',
            width: 50,
            dataIndex: 'name',
            // 渲染一个序号出来
            render(_: any, __: any, index: number) {
                return index + 1
            }
        },
        {
            title: '医院名称',
            dataIndex: 'hosname',
        },
        {
            title: '医院编号',
            dataIndex: 'hoscode',
        },
        {
            title: 'api基础路径',
            dataIndex: 'apiUrl',
        },
        {
            title: '签名',
            dataIndex: 'signKey',
        },
        {
            title: '联系人姓名',
            dataIndex: 'contactsName',
        },
        {
            title: '联系人手机',
            dataIndex: 'contactsPhone',
        },
        {
            title: '操作',
            // 设置一个宽度属性,可自定义宽度
            width: 120,
            fixed: 'right' as 'right',
            // 操作列上有两个按钮,我们可以直接设置button按钮,然后增加相应的属性即可
            render(_:any,data:getHosSetListItemsType) {
                // ###Params传值id
                // render按钮,两个参数,第二个参数是整体数据,id值可以通过解构的方式获得
                const {id}=data
                return (
                    <div>
                        {/* 
                            ###Params传值id
                            操作按钮上的修改按钮,即更新医院数据的操作,使用navigate进行路由导航
                            当我们点击修改按钮的时候,获取到了id值,通过params路由传参的形式,将id传到后端
                        */}
                        <Tooltip placement="top" title={'修改数据'}>
                        <Button type='primary' icon={<EditOutlined />} onClick={()=>{navigate(`/syt/hospital/updatehosset/${id}`)}}></Button>
                        </Tooltip>
                        <Tooltip placement="top" title={'删除数据'}>
                        <Button type='primary' danger icon={<DeleteOutlined />} className={style.mr} onClick={deleteHosSetIdHandle(id)}></Button>
                        </Tooltip>
                    </div>
                )
            }
        }
    ]

    // 1.给pagination的onchange属性设置事件函数,给参数设置数据类型
    // 当点击当前页码时,给数据从新赋值,点击页数以及每页数据个数
    //参数1page:当前点击的页码  参数2 pageSize:每页条数
    const getHospitalPaginationData = (current: number, pageSize: number) => {
        // 给当前页码和每页展示数据进行从新赋值,点击时渲染展示
        setCurrent(current)
        setPageSize(pageSize)
    }

    // 2.1.3点击查询表单搜索框的事件函数,
    const searchHosFinishHandle = (iptvalues: searchHosFinishPraType) => {
        // 参数是当前表单输入框的值
        setIptvalues(iptvalues)
    }

    // 3.2.3添加/更新医院数据的回调函数
    const addHosHandle=()=>{
        //编程式路由导航跳转到更新数据的页面
        navigate("/syt/hospital/addhosset")
    }

    // 删除医院数据的事件函数
    const deleteHosSetIdHandle=(id:string)=>{
        // 内部的回调才是真正的请求函数
        return async()=>{
            await deleteHosSetIdRequest(id)
            // 当请求成功之后,这里从新渲染,并把状态取反,此时状态改变,useEffect再次执行
            setRendState(!rendState)
            // 删除成功后增加弹窗
            message.success("删除数据成功")

        }
    }

    // 批量删除医院数据的事件回调函数
    const deleteDataBatchesHandle=async ()=>{
        // 发送批量删除的请求,批量删除的参数是我们保存的勾选的复选框的id选项
        await deleteDataBatchesRequest(bacthSelectIds)

        message.success("批量删除成功");
        // 删除完成之后,这里将多选框状态从新更新为true,下面取反之后为false,变成无法选取状态
        setIsSelect(true)
    }

    return (
        <div className={style.outer}>
            <Card>
                <Form
                    name="basic"
                    wrapperCol={{ span: 30 }}
                    // 表单成一行排列
                    layout='inline'
                    // 2.1.3提交表单且数据验证成功后回调事件
                    onFinish={searchHosFinishHandle}

                >
                    {/* Form.Item单个表单组件,用来包裹input输入框 */}
                    <Form.Item
                        name="hosname"
                    >
                        <Input placeholder='医院名称' />
                    </Form.Item>

                    <Form.Item
                        name="hoscode"
                    >
                        <Input placeholder='医院编号' />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                            查询
                        </Button>
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="default" htmlType="reset">
                            清空
                        </Button>
                    </Form.Item>
                </Form>
                <div className={style.mt}>
                    <Button type='primary' onClick={addHosHandle} >添加</Button>
                    {/* 这里给disabled增加一个state状态,勾选复选框时,状态改变,useEffect会监听并重新渲染 */}
                    <Button type='primary' danger disabled={isSelect} className={style.mr} onClick={deleteDataBatchesHandle}>批量删除</Button>
                </div>

                {/* 引入上面设置的数据, columns以及data */}
                <Table
                    columns={columns}
                    // 将useState中解构的数据填入
                    dataSource={tableData}
                    className={style.mt}
                    // rowKey属性,当数据中没有设置key的时候,可以使用rowkey属性,指定一个数据来作为key
                    rowKey='id'
                    // 横向滚动条设置,横向超过1200时出现滚动条
                    scroll={{ x: 1200 }}
                    // 是否展示外边框和列边框的属性
                    bordered
                    // 5.1设置页面等待效果的属性***
                    loading={isLoading}
                    // 分页配置项
                    pagination={{
                        //页码的配置：当前页码***2.1
                        current,
                        //总数据的数量***3.1
                        total,
                        //每页条数***4.1
                        pageSize,
                        //展示更改每页条数的选项(默认total大于50条的时候开启)
                        pageSizeOptions: [3, 10, 20],
                        //是否直接开启更新每页条数的选项
                        showSizeChanger: true,
                        showTotal(total) {
                            return `总共有${total}条数据`
                          },
                        // 给页码pagination设置onchange事件,改变时重新渲染
                        onChange: getHospitalPaginationData
                    }}
                    rowSelection={{
                        // onChange有两个参数,第一个参数是id,id的类型已经定义就是key,直接从react引入
                        // 第二个参数就是我们获取的数据data,直接引入类型即可
                        onChange(ids: Key[], datas: getHosSetListItemsType[]){
                            // 我们在这里对批量删除框的状态进行设置
                            // 上面通过测试已知,第一个参数ids是一个数组,当我们没有勾选多选框时,数组长度为0,因为默认的State状态为true
                            // 所以此时setIsSelect取反的状态为false,,批量删除不可勾选,当我们勾选复选框时
                            // ids.length为false,此时取反就是true,复选框变成可选状态
                            setIsSelect(!ids.length)
                            // 当选项框被修改的时候,实时保存所有被选中的id的状态,设置给bacthSelectIds
                            // 当我们批量删除的时候,需要用到这里保存的bacthSelectIds的值
                            setBatchSelectIds(ids)
                        }
                    }}
                />
            </Card>
        </div>
    )
}
